<template>
  <view class="upLoad-wrap">
    <view class="item" v-for="(item, index) of tempFilePaths" :key="index" @click="handlePreview(item.path)">
      <image :src="item.path"></image>
      <view v-if="item.progress < 100" class="shade">{{item.progress}} %</view>
    </view>
  </view>
</template>

<script>
import base from '../../api/base'
export default {
  name: 'upload',
  props: {
    isChoose: {
      type: Number,
      default: 0
    }
  },
  watch: {
    isChoose: {
      handler: function(val) {
				console.log(val)
        if (val > 0) {
          this.chooseImg()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      tempFilePaths: []
    }
  },
  methods: {
    chooseImg(){
			const _this = this
      uni.chooseImage({
        count: 9,
				success(choosImgPath) {
          _this.tempFilePaths = choosImgPath.tempFiles.map((item) => {
						item.progress = 0
						return item
					})
					_this.handleUpLoadImg(_this.tempFilePaths)
					_this.$store.dispatch('audit/upload', {isUpload:false, path: ''})
        }
      })
    },
    handlePreview(path) {
			const _this = this
      uni.previewImage({
        current: path,
				urls: _this.tempFilePaths
      })
    },
		// 上传
		handleUpLoadImg(paths) {
			const _this = this
			const result = []
			const userInfo = uni.getStorageSync('USER_INFO')
			paths.map((item) => {
				const uploadTask  = uni.uploadFile({
            url: `${base.url}/tool/stu_par_upload`, //仅为示例，非真实的接口地址
            filePath: item.path,
            name: 'file',
						header: {
							'Auth-id': JSON.parse(userInfo).authId,
							'Auth-token': JSON.parse(userInfo).authToken,
						},
            success: (uploadFileRes) => {
							console.log(uploadFileRes)
							_this.$store.dispatch('audit/upload', {isUpload:true, path: JSON.parse(uploadFileRes.data).data})
            }
        });
				uploadTask.onProgressUpdate((res) => {
          item.progress = res.progress
        });
			})
		}
  }
}

</script>
<style lang='scss' scoped>
.upLoad-wrap{
  width: 100%;
  display: flex;
  margin-right: 10upx;
	flex-wrap: wrap;
	.item {
		width: 180upx;
		height: 180upx;
		margin-bottom: 10upx;
		position: relative;
	}
  image{
    width: 100%;
		height: 100%;
  }
  .shade{
    position: absolute;
    top: 0;
    left:0;
    width: 180upx;
    height:180upx;
    background-color: rgba(0,0,0,0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		color: #fff;
  }
}
</style>